// 等待整个 DOM 加载完毕后，再执行我们的代码
document.addEventListener('DOMContentLoaded', () => {

    // 1. 获取需要的 DOM 元素
    const todoForm = document.getElementById('todo-form');
    const todoInput = document.getElementById('todo-input');
    const todoList = document.getElementById('todo-list');

    // 2. 初始化任务数组
    // 尝试从 localStorage 获取任务，如果不存在，则初始化为空数组
    // JSON.parse() 将 JSON 字符串转换回 JavaScript 对象
    let todos = JSON.parse(localStorage.getItem('todos')) || [];

    // 3. 将任务保存到 localStorage 的函数
    const saveTodos = () => {
        // localStorage 只能存储字符串，所以需要用 JSON.stringify() 转换
        localStorage.setItem('todos', JSON.stringify(todos));
    };

    // 4. 渲染任务列表到页面的函数
    const renderTodos = () => {
        // 渲染前先清空旧的列表
        todoList.innerHTML = '';

        // 遍历任务数组，为每个任务创建一个 <li> 元素
        todos.forEach((todo, index) => {
            const li = document.createElement('li');
            li.className = 'todo-item';

            // 如果任务已完成，添加 'completed' 类
            if (todo.completed) {
                li.classList.add('completed');
            }

            // 设置 li 的内容，包括任务文本和删除按钮
            // 使用 data-index 属性来存储任务在数组中的索引，方便后续操作
            li.innerHTML = `
                <span data-index="${index}">${todo.text}</span>
                <button class="delete-btn" data-index="${index}">删除</button>
            `;

            // 将创建的 li 添加到 ul 中
            todoList.appendChild(li);
        });
    };

    // 5. 添加新任务的事件监听
    todoForm.addEventListener('submit', (e) => {
        // 阻止表单的默认提交行为（页面刷新）
        e.preventDefault();

        // 获取输入框的值，并去除两端空格
        const newTodoText = todoInput.value.trim();

        // 如果输入不为空
        if (newTodoText !== '') {
            // 创建一个新的任务对象，并添加到任务数组中
            todos.push({ text: newTodoText, completed: false });

            // 保存并重新渲染
            saveTodos();
            renderTodos();

            // 清空输入框
            todoInput.value = '';
        }
    });

    // 6. 利用事件委托处理任务的点击（完成/删除）
    todoList.addEventListener('click', (e) => {
        const target = e.target;
        const index = target.dataset.index;

        if (index === undefined) return; // 如果点击的不是任务项或按钮，则不处理

        // 如果点击的是 "删除" 按钮
        if (target.classList.contains('delete-btn')) {
            // 从数组中删除该任务
            // splice(index, 1) 表示从 index 位置开始，删除 1 个元素
            todos.splice(index, 1);
        }
        // 如果点击的是任务文本 <span>
        else if (target.tagName === 'SPAN') {
            // 切换任务的完成状态
            todos[index].completed = !todos[index].completed;
        }

        // 保存并重新渲染
        saveTodos();
        renderTodos();
    });

    // 7. 初始加载时渲染一次任务列表
    renderTodos();
});